<template>

    <div>
       <template v-if="login">
       <div class="layout">
       <Headerbar></Headerbar>
       <div class="showwindow" :style="{minHeight:num}">
            <Row type="flex" :style="{minHeight:num}">
                <asidebar style="width:201px;background:white;border: 1px solid #dbe3f3;padding-top: 10px;"></asidebar>
                <i-col style="width:983px"
                    <div class="layout-content" style="width:999px;margin:0px;border: 1px solid #dbe3f3;border-left:none;">
                        <div class="layout-content-main" style="padding:0px">
                            <router-view></router-view>
                        </div>
                    </div>
                </i-col>
            </Row>
        </div>
        <footerbar></footerbar>
        </div>
        </template>

        <template v-else>
            <div>
                <div id="bg"><img src="/static/img/bg.png" alt=""></div>
                <div id="dmore"><img class="dmore1" src="/static/img/dmore.png" alt=""></div>
                <Modal v-model="loginModal" width="360" :closable="false"  :mask-closable="false" :styles="{top:'300px'}">
                    <div>
                        <h2 style="margin-top: 8px;font-family:yahei;font-size:24px;margin-bottom:10px;color:#34363c;text-align:center">贷猫管理平台</h2>
                        <Form ref="formInline" :model="formInline" :rules="ruleInline"   style="margin-bottom: 12px;">
                        <Form-item prop="userName" style="margin-left:28px;margin-top:18px;margin-bottom: 25px;">
                            <Input v-model="formInline.userName" placeholder="账号" style="width:270px;height:40px">
                            </Input>
                        </Form-item>
                        <Form-item prop="userPwd" style="margin-left:28px;margin-bottom: 25px;">
                            <Input v-model="formInline.userPwd" type="password" placeholder="密码" style="width:270px;height:40px" @input="changepass">
                            </Input>
                        </Form-item > 
                            <Row style="margin-left:28px;">
                                <Col span="12">
                                    <Checkbox v-model="checked">记住密码</Checkbox>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                    <div slot="footer" style="width:270px;margin:0 auto;">
                        <Button type="primary" size="large" long :loading="loading"  @click="handleSubmit('formInline')" style="width:270px;height:40px;border-radius: 4px;background:#5b8cff;">登录</Button>
                    </div>
                </Modal>
            </div>
        </template>
    </div>

</template>

<script>
    import Base from './common/Base.js'
    import Headerbar from './components/layout/Headerbar.vue'
    import Footerbar from './components/layout/Footerbar.vue'
    import Asidebar from './components/layout/Asidebar.vue'
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    var CryptoJS = require("crypto-js");
    //import NprogressContainer from 'vue-nprogress/src/NprogressContainer.vue'
    export default {
        mixins:[Base],
        data() {
            return {
                num:'700px',
                changed:false,
                checked: false,
                loading: false,
                loginModal: true,
                formInline: {
                    userName: '',
                    userPwd: ''
                },
                ruleInline: {
                    userName: [{
                        required: true,
                        message: '请填写用户名',
                        trigger: 'blur'
                    }],
                    userPwd: [{
                            required: true,
                            message: '请填写密码',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            min: 6,
                            message: '密码长度不能小于6位',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created(){
            let _this = this;
            window.onresize = function(){  
                let minH=document.documentElement.clientHeight;
                _this.num=minH-232+'px';  
            }
            let minH=document.documentElement.clientHeight;  
            _this.num=minH-232+'px';
            if(window.localStorage.lodingname){
                this.formInline.userName=localStorage.lodingname;
                this.formInline.userPwd=localStorage.lodingpassword;
                this.checked=true;
            }
            if(window.sessionStorage.lodingname){
                this.checkLogin(true);
            }
        },
        methods: {
            ...mapActions(['checkLogin']),
            handleSubmit(name) {
                // CryptoJS.MD5(_this.formValidate.password, { asString: true })
                let _this = this; 
                this.$refs[name].validate((valid) => {
                    this.loading = true;
                    if(_this.changed){
                        // _this.formInline.password = CryptoJS.MD5(_this.formInline.password, {
                        //     asString: true
                        // }).toString();
                        this.changed=false;
                    }
                    if(_this.checked){
                        localStorage.lodingname=_this.formInline.userName;
                        localStorage.lodingpassword=_this.formInline.userPwd;
                    }else{
                        localStorage.lodingname="";
                        localStorage.lodingpassword="";
                    }
                    setTimeout(() => {
                        this.loading = false;   
                        if (valid) {
                            _this.$http.post(`${_this.dmoreurl}/saAuth/login`, _this.formInline).then((res,red) => {
                                if (res.data.data.token) {
                                    this.token=res.data.data.token
                                    console.log(this.token)
                                    document.cookie='dmore_token='+this.token;
                                    this.$Message.success('登录成功!');
                                    sessionStorage.lodingname=_this.formInline.userName;
                                    sessionStorage.lodingpassword=_this.formInline.userPwd;
                                    this.checkLogin(true);                                  
                                } else {
                                    this.$Message.error('用户名或密码错误!');
                                }
                            })
        
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    }, 1000);
                })
            },
            changepass(){
                this.changed=true;
            }
        },
        components: {
            Footerbar,
            Headerbar,
            Asidebar,
            //NprogressContainer
        },
        computed: {
            ...mapGetters(['login'])
        },
        mounted() {
            //$('ivu-modal-mask').css({'backgroundColor':'rgba(55,55,55,0)'})
            // this.$nextTick(() => {
            //     this.$nprogress.configure({
            //         parent: '.nprogress-container'
            //     })
            // });
        }
    }
</script>
<style lang="scss">
    #dmore{
        position: relative;
        z-index: 801;
    }
    .dmore1{
        margin: 0 auto;
        display: block;
        padding-top: 208px;
    }
    .showwindow{
        margin:0 auto;
        width:1200px;
        margin-bottom: 60px;
        margin-top: 30px;
    }
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        background: #464c5b;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,0);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .ivu-col{
        transition: width .2s ease-in-out;
    }
    
    .nprogress-container {
        position: fixed !important;
        width: 100%;
        height: 50px;
        z-index: 2048;
        pointer-events: none;
        #nprogress {
            $color: red;
            .bar {
                background: $color;
            }
            .peg {
                box-shadow: 0 0 10px $color, 0 0 5px $color;
            }
            .spinner-icon {
                border-top-color: $color;
                border-left-color: $color;
            }
        }
    }
    #bg{
        z-index:800 !important;
        position: fixed;  
        width:100%;  
        height:100%; 
    }
    #bg img{
        width:100%;  
        height:100%;
    }
    .ivu-modal-mask{
        z-index:500 !important;
    }
    .ivu-input{
        background: rgb(246,248,252) !important;
         font-size: 14px !important;
        height:40px !important;
    }
</style>